<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content {
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #0095d7;
            color: white;line-height: 60px" @back="goBack" content="修改收获地址">
    </el-page-header>
    <el-card  style="width: 600px;height: 800px;margin: 0 auto">
        <el-form :model="ruleForm" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="ruleForm.consignee"></el-input>
            </el-form-item>
            <el-form-item label="电话号">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input v-model="ruleForm.location"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="update()">修改地址</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="error" @click="err()">删除该地址</el-button>
            </el-form-item>

        </el-form>
    </el-card>


</div>
</body>


<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                ruleForm: {
                    id: "",
                    consignee: "",
                    phone: "",
                    location: ""
                },
            }
        },
        methods: {
            update() {
                if (v.ruleForm.consignee == "") {
                    v.$message.error("请输入您要收货的名字!");
                    return;
                }
                if (v.ruleForm.phone == "") {
                    v.$message.error("请输入您的电话号!");
                    return;
                }
                if (v.ruleForm.location == "") {
                    v.$message.error("请输入收获地址!");
                    return;
                }
                console.log('ruleForm:',v.ruleForm)
                //发出修改地址的请求
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .post("/address/update",v.ruleForm).then(function (response) {
                    v.$message.success("修改成功!");
                    location.href = "/admin.html?id="+v.ruleForm.userId;
                    //v.goBack();
                })
            },
            err() {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .post("/address/" + v.p.id + "/deleteById",).then(function (response) {
                    location.href = "/address.html";
                })
            },

            goBack() {
                history.back();//返回上一页面
            },
        },
        created: function () {
            if (location.search.indexOf("id") != -1) {//包含wd代表显示搜索结果
                //根据地址栏中的wd搜索内容发出请求获取所有相关地址
                let id = location.search.split('=')[1];
                console.log('...................'+id)
                let url = "/address/"+id+"/selectById";
            axios
                .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                .get(url).then(function (response) {
                console.log(response.data)
                v.ruleForm = response.data.data;
                console.log(this.ruleForm)
            })
        }}
    })
</script>
</html>